<!-- 生活缴费 -->
<template>
    <div class="lifePayCost flex flexColumn">
        <van-nav-bar title="生活缴费" left-arrow :border="false" @click-left="onClickLeft"/>
       <div class="flex alignCenter justifyCenter allFlex">
            <div class="centerBg">
                <img src="@/assets/lifePayCost/centerBg.png" alt="">
            </div>
            <div class="centerIcon">
                <img src="@/assets/lifePayCost/centerIcon.png" alt="">
            </div>
            <div class="navWrap">
                <div :style="`left:${item.offset.x}px;top:${(clients.height - 70) / 2 - item.offset.y}px;position:absolute`" class="navItem flex flexColumn alignCenter justifyCenter" v-for="item in navList" :key="item.id" @click="next(item)">
                    <img :src="item.imgUrl" alt="">
                    <span>{{item.title}}</span>
                </div>
            </div>
       </div>
    </div>
</template>

<script>
import { ref, reactive, getCurrentInstance } from 'vue';
import { NavBar } from 'vant';
export default {
    components: {
        [NavBar.name]: NavBar,
    },
    setup() {
        const { proxy } = getCurrentInstance();
        // 返回上一页
        const onClickLeft = () => history.back();

        // 获取生活缴费开关
        const navList = ref([])
        const getNav = () => {
            proxy.$http.brandApi.queryAppInforMtion({infoType: 18,isBrand: true,})
            .then(res=>{
                if(res.success){
                    res.data.content.sort((a,b) => -1)
                    navList.value = res.data.content.map(item =>{
                        var offset = {
                            'x': 0,
                            'y': 0,
                        }
                        
                        item.offset = offset
                        return item;
                    })
                    console.log(navList.value);
                    setTimeout(()=>{
                        navList.value = navList.value.map(item=>{
                            item.offset.x = (document.body.clientWidth / 2 + 0) * Math.cos((navList.value.length - navList.value.indexOf(item)) * Math.PI / (navList.value.length + 1)) 
                            item.offset.y = (document.body.clientWidth / 2 + 0) * Math.sin((navList.value.length - navList.value.indexOf(item)) * Math.PI / (navList.value.length + 1))
                            return item;
                        })
                    },300)
                }else{
                    proxy.$toast({position: 'bottom',message:res.errMessage})
                }
            })
        }
        getNav();
        // 屏幕宽高
        const clients = reactive({
            'width': document.body.clientWidth,
            'height': document.body.clientHeight,
        })

        // 页面跳转
        const next = (item) => {
            if(item['title'] == '话费快充'){
                proxy.$router.push({name: 'telephoneCharge',params: {'edition': '1'}})
            }
            if(item['title'] == '话费慢充'){
                proxy.$router.push({name: 'telephoneCharge',params: {'edition': '2'}})
            }
            if(item['title'] == '电费慢充'){
                proxy.$router.push({name: 'electricityCharge',params: {'edition': '2'}})
            }
            if(item['title'] == '电费快充'){
                proxy.$router.push({name: 'electricityCharge',params: {'edition': '1'}})
            }
            if(item['title'] == '9折抖币' || item['title'] == '线下售电'){
                proxy.$router.push({name: 'tiktokCurrency',params: {'edition': '2'}})
            }
        }

        return{
            onClickLeft,
            navList,
            clients,
            next,
        }
    }
}

</script>
<style scoped>
.lifePayCost{
    min-height: 100vh;
    background: url('../../assets/lifePayCost/bg.png') no-repeat;
    background-size: 100%;
}
.centerBg{
    width: 360px;
    height: 442px;
}
.centerBg img,.centerIcon img{
    width: 100%;
    display: inline-block;
}
.centerIcon{
    position: fixed;
    width: 232px;
    height: 248px;
}
.lifePayCost /deep/ .van-nav-bar{
    background: none;
}
.lifePayCost /deep/ .van-icon{
    color: #FFFFFF;
}
.lifePayCost /deep/ .van-nav-bar__title{
    color: #FFFFFF;
}

/* 生活缴费导航 */
.navWrap{
    position: fixed;
    width: 67px;
}
.navItem{
    position: absolute;
    height: 85px;
    font-size: 12px;
    color: #FFFFFF;
    transition: all .5s ;
}
.navItem img{
    width: 67px;
    height: 65.5px;
    margin-bottom: 3px;
}
</style>